<style scoped>
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    padding: 0.5rem;
    border-bottom: 1px solid #dbdbdb;
}
</style>
<template>
    <section class="flex gap-col-4">
        <div class="flex-1 flex gap-col-4">
            <div class="w-300px bg-white box-border pa-4">
                <div class="text-lg pa-2 font-bold flex items-center justify-between">
                    <div>字典列表</div>
                    <NButton @click="insertData" size="small" type="primary">添加</NButton>
                </div>
                <n-menu :options="dataList" v-model:value="dictTypeCode" :key-field="'code'" :label-field="'name'" :render-label="renderLabel" @update:value="handleSelectRole" />
            </div>
            <div class="flex-1">
                <list :key="dictTypeCode" :code="dictTypeCode" />
            </div>
        </div>

        <n-modal
            v-model:show="formVisible"
            :auto-focus="false"
            :close-on-esc="false"
            preset="card"
            :style="{width: '800px'}"
            :title="formTitle"
            size="large"
            :bordered="false"
            :segmented="{content: 'soft', footer: 'soft'}">
            <TypeForm :identity="dataInfo.identity" @confirm="formConfirm" @cancel="formCancel" />
        </n-modal>

    </section>

</template>

<script setup lang="ts">
import List from './data-list.vue'
import {Api} from '@/api/type'
import {h, onMounted, ref} from 'vue'
import {BaseApi} from '@/api/base-api'
import TypeForm from './type-form.vue'
import type {MenuOption} from 'naive-ui/es/menu/src/interface'
import {NButton, NFlex, NMenu, NModal, NPopover, useDialog, useMessage} from 'naive-ui'
// -------------------------------------------------
type R<T> = Api.Common.R<T>;
type Data = Api.System.DictType;
// -------------------------------------------------
const dialog = useDialog()
const message = useMessage()
const formTitle = ref<string>('')
const formVisible = ref<boolean>(false)
//
const baseApi = new BaseApi<Data>('dict-type')
const dataList = ref<Data[]>([])
const dataInfo = ref<Partial<Data>>({})
const dictTypeCode = ref<string>('')

async function getDataList() {
    let result: R<Data[]> = await baseApi.getDataList()
    dataList.value = result.data || []
}

/**
 * 添加数据
 */
async function insertData() {
    dataInfo.value = {}
    formTitle.value = '添加数据'
    formVisible.value = true
}

/**
 * 修改数据
 */
async function updateData(identity: string) {
    dataInfo.value = {identity: identity}
    formTitle.value = '修改数据'
    formVisible.value = true
}

/**
 * 删除数据
 */
async function deleteData(identity: string) {
    new Promise((resolve, reject) => {
        dialog.warning({
            title: '提示',
            content: '确定要移除选中的数据吗?',
            positiveText: '确定',
            negativeText: '取消',
            closeOnEsc: false,
            maskClosable: false,
            onPositiveClick() {
                resolve(true)
            },
            onNegativeClick() {
                reject(false)
            }
        })
    }).then(async () => {
        let result = await baseApi.removeData(identity)
        if (result.code == 0) {
            message.success('移除选中的数据成功')
            await getDataList()
        } else {
            message.error('移除选中的数据失败[' + (result.message || '') + ']')
        }
    })
}

function renderLabel(option: MenuOption) {
    return h('div', {
        class: 'flex items-center justify-between'
    }, [
        h('div', {}, option.name as string),
        h(NPopover, {placement: 'right', trigger: 'hover'}, {
            trigger: () => [
                h('svg', {
                    class: ['w-22px', 'h-22px', 'inline-block', 'outline-none', 'hover:bg-#e5e7eb'],
                    width: '48', height: '48', viewBox: '0 0 48 48',
                    fill: 'none', xmlns: 'http://www.w3.org/2000/svg'
                }, [
                    h('circle', {cx: '24', cy: '12', r: '3', fill: '#0f1023'}),
                    h('circle', {cx: '24', cy: '24', r: '3', fill: '#0f1023'}),
                    h('circle', {cx: '24', cy: '35', r: '3', fill: '#0f1023'})
                ])
            ],
            default: () => {
                return h(NFlex, {vertical: true}, {
                    default: () => [
                        h(NButton, {strong: true, secondary: true, size: 'small', onClick: () => updateData(option.identity as string), type: 'primary'}, {default: () => '编辑'}),
                        h(NButton, {strong: true, secondary: true, size: 'small', onClick: () => deleteData(option.identity as string), type: 'error'}, {default: () => '删除'})
                    ]
                })
            }
        })
    ])
}

function handleSelectRole(key: string, item: MenuOption) {
    dictTypeCode.value = key
}

async function formConfirm() {
    formVisible.value = false
    await initialize()
}

async function formCancel() {
    formVisible.value = false
    await initialize()
}

async function initialize() {
    await getDataList()
    dictTypeCode.value = dataList.value[0]?.code || ''
}

onMounted(() => {
    initialize()
})
</script>
